import PropTypes from 'prop-types';
import React from 'react';
import ReactModal from 'react-modal';

import Box from '../box/box.jsx';
import styles from './browser-modal.css';
import unhappyBrowser from './unsupported-browser.svg';

const BrowserModal = ({...props}) => {
    return (
        <ReactModal
            isOpen
            className={styles.modalContent}
            contentLabel="不支持当前浏览器"
            overlayClassName={styles.modalOverlay}
            onRequestClose={props.onBack}
        >
            <div dir='ltr' >
                <Box className={styles.illustration}>
                    <img src={unhappyBrowser} />
                </Box>

                <Box className={styles.body}>
                    <h2>
                    {props.error ? "出错了":"不支持当前浏览器"}
                    </h2>
                    <p>
                        {"我们十分抱歉，Scratch不支持您正在使用的浏览器，我们建议您升级到我们所支持的浏览器的最新版本，例如Chrome、火狐、Edge或者Safari。"}
                    </p>

                    <Box className={styles.buttonRow}>
                        <button className={styles.backButton} onClick={props.onBack}>
                            返回
                        </button>

                    </Box>
                    <div className={styles.faqLinkText}>
                        访问 <a className={styles.faqLink} href="/3faq" >常见问题</a>，了解更多。
                    </div>
                </Box>
            </div>
        </ReactModal>
    );
};

BrowserModal.propTypes = {
    error: PropTypes.bool,
    onBack: PropTypes.func.isRequired
};

BrowserModal.defaultProps = {
    error: false
};

const WrappedBrowserModal = BrowserModal;
//const WrappedBrowserModal = injectIntl(BrowserModal);

WrappedBrowserModal.setAppElement = ReactModal.setAppElement;

export default WrappedBrowserModal;
